/**
 * Created by fupeng on 17/6/22.
 */

var getSpreaderurl = '/getSpreaders';
var myApp = new Framework7({
    modalTitle: '提示',
    modalButtonOk: '确认',
    modalButtonCancel: '取消',
    material: true
});
// Export selectors engine
var $$ = Dom7;

var mainView = myApp.addView('.view-main', {
    // Because we use fixed-through navbar we can enable dynamic navbar
    domCache: true
});

var navbarTemplate = '<div class="navbar">'
    + '<div class="navbar-inner">'
    + '<div class="left sliding">'
    + '<a href="#" class="link close-popup photo-browser-close-link {{#unless backLinkText}}icon-only{{/unless}} {{js "this.type === \'page\' ? \'back\' : \'\'"}}">'
    + '<i class="icon icon-back {{iconsColorClass}}"></i>'
    + '{{#if backLinkText}}<span>{{backLinkText}}</span>{{/if}}'
    + '</a>'
    + '</div>'
    + '<div class="right"></div>'
    + '</div>'
    + '</div>'
var myPhotoBrowser;

$$('.page').on('click','.qrcode', function () {
    if(myPhotoBrowser){
        myPhotoBrowser.close();
    }
    myPhotoBrowser = myApp.photoBrowser({
        photos: [
            {
                url: $$(this).data('img'),
                caption: $$(this).prev().text()
            }

        ],
        backLinkText: '关闭二维码',
        toolbar: false,
        navbarTemplate: navbarTemplate
    });
    myPhotoBrowser.open();
});



var param = {
    lastIndex: 0
}
getSpreader(getSpreaderurl, param);

 mySearchbar = myApp.searchbar('.searchbar', {
    customSearch: true,
    onSearch: function () {
        if (xhr) {
            xhr.abort();
        }
        myApp.detachInfiniteScroll($$(mainView.activePage.container).find('.infinite-scroll'));
        var param = {
            lastIndex: 0,
            nickname: mySearchbar.query
        };
        $$('.spreader').html('');
        getSpreader(getSpreaderurl, param);
    }
});

var loading = false;
$$('.infinite-scroll').on('infinite', function () {
    // 如果正在加载，则退出
    if (loading) return;
    // 设置flag
    loading = true;
    var param;
    param = {
        lastIndex: $$(mainView.activePage.container).find(".spreader li").length,
        nickname: mySearchbar.query
    }
    getSpreader(getSpreaderurl, param);

});


var xhr;
function getSpreader(url, param) {
    $$(mainView.activePage.container).find('.infinite-scroll-preloader div').text('正在加载，请稍后...');
    xhr = $$.post(url,
        param,
        function (data) {
            if (data.length == 0) {
                return;
            }
            var data = JSON.parse(data);
            if (data.status = 'success') {
                setForm(data.data);
                xhr = null;
            } else {
                myApp.alert("出现故障");
                return;
            }
            if (data.data.length < 20) {
                myApp.detachInfiniteScroll($$(mainView.activePage.container).find('.infinite-scroll'));
                $$(mainView.activePage.container).find('.infinite-scroll-preloader div').text('加载完毕，没有更多数据');
            } else if (data.data.length == 20 && $$(".spreader li").length == 20) {
                myApp.attachInfiniteScroll($$(mainView.activePage.container).find('.spreader').parents('.page-content'));
                $$(mainView.activePage.container).find('.infinite-scroll-preloader div').text('上拉加载更多');
            } else {
                $$(mainView.activePage.container).find('.infinite-scroll-preloader div').text('上拉加载更多');
            }
        });
}

function setForm(spreaders) {
    // 生成新条目的HTML
    var html = '';

    $$.each(spreaders, function (i, v) {
        html +='<li class="item-content">'
        html +='<div class="item-media">'
        html += '  <img src="'+v["headimgurl"]+'" style="width:30px;height:30px;border-radius:50%;border: solid 1px gainsboro;">'
        html += '  </div>'
        html += '  <div class="item-inner">'
        html +=  '  <div class="item-title" style=" overflow: hidden;text-overflow: ellipsis;white-space: nowrap;width: 25%">'+v["nickname"]+'</div>'
        html += '<div class="item-text qrcode" data-img="'+v["qrcodeaddress"]+'" style="margin-left: -5%">查看二维码</div>'
        html += '  <div class="item-after">推广人数&nbsp;<span class="badge bg-green" >'+v["total"]+'</span></div>'
        html +='</div>'
        html +='</li>';
    });

    $$('.spreader').append(html);
    loading = false;

}

